<template>
    <!-- 导航栏 -->
    <div id="nav">
        <el-row>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <img :src='"/api" + logo' alt="listen" class="img" @click="toIndex">
                </div>
            </el-col>
            <el-col :span="3">
                <router-link to="/">首页</router-link>
            </el-col>
            <el-col :span="3">
                <router-link to="/singer">歌手</router-link>
            </el-col>
            <el-col :span="3">
                <router-link :to="{ path:'/rank', query:{ url:'listens/newSongs',regionID:'新歌'} }">
                    排行榜
                </router-link>
            </el-col>
            <el-col :span="3">
                <router-link to="/classify">歌曲分类</router-link>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple-light" style="width: 80%;float: left;">
                    <el-input placeholder="搜索音乐、歌手" v-model="search" @keyup.enter.native="toSearch()">
                        asfsa
                    </el-input>
                </div>
                <el-button icon="el-icon-search" circle @click="toSearch"></el-button>
            </el-col>
            <el-col :span="3">
                <router-link to="/login" v-if="user == null">登录</router-link>
                <div v-else @mouseenter="on" @mouseleave="off" @click="toPerson">
                    <img class="user" :src="'/api/' + user.headImg" >
                    <div v-show="p" class="person" @mouseenter="on" @mouseleave="off">
                        <img class="user1" :src="'/api/' + user.headImg" @click="toPerson" alt="">
                        <span style="margin-top: 15px;">{{ user.userName }}</span>
                        <div style="margin-top: 10px; z-index: 5;">
                            <button @click="del" class="tc">退出登录</button>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
    data() {
        return {
            p: false,
            search: null,
            logo: null
        }
    },
    computed: {
        //映射user模块的state中的user对象
        ...mapState("user", ["user"])
    },
    methods: {
        ...mapMutations("user", ["userDel"]),
        toPerson: function () {
            this.$router.push("/person")
        },
        toIndex() {
            this.$router.push("/")
        },
        on() {
            this.p = true
        },
        off() {
            this.p = false
        },
        del() {
            this.p = false
            this.userDel()
        },
        toSearch: function () {
            if (this.search == null) {
                this.$message({
                    message: '请输入内容',
                    type: 'warning'
                });
            } else {
                this.$router.push(`/search/${this.search}`)
            }
        }
    },
    created: function () {
        this.axios({
            url: "/api/listens/logo"
        }).then(res => {
            this.logo = res.data.data.img[0].singerImg
        }).catch(err => {
            console.log("logo请求错误");
        })
    }
};
</script>

<style>
#nav {
    width: 80%;
    margin: 0px auto;
    height: 70px;
    background: white;
}

.el-row {
    padding-top: 15px;
    margin-bottom: 0px;
    &:last-child {
        margin-bottom: 0px;
    }
}

.el-col {
    border-radius: 4px;
    line-height: 36px;
}

#nav a {
    color: black;
    text-decoration: none;
}

#nav a:hover {
    cursor: pointer;
    color: plum;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    /* background-color: #f9fafc; */
}

.grid-content:hover {
    cursor: pointer;
    color: white;
}

#nav .img {
    height: 60px;
}

#nav .user {
    width: 38px;
    height: 38px;
    border: blueviolet 3px solid;
    border-radius: 30px;

}

#nav .user:hover {
    cursor: pointer;
}

/* #nav .grid-content input{
    height: 20px;
} */

#nav .person {
    display: flex;
    flex-wrap: wrap;
    width: 120px;
    float: right;
    background: plum;
    padding: 5px 10px;
    position: fixed;
    top: 20px;
    right: 60px;
    z-index: 10;
    border-radius: 15px; 
}

#nav .person .user1 {
    width: 40px;
    height: 40px;
    background: pink;
    border-radius: 30px;
    margin-right: 10px;
    border: white 3px solid;
}

#nav .person .tc{
    background-color: white;
    border-radius: 30px;
    cursor: pointer;
}

#nav .person .user1:hover {
    cursor: pointer;
}
</style>